<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 50%;
            height: 100vh;
            margin: 0 auto;
            background-color: navajowhite;
        }

        body>div {
            margin: 2px;
            color: #000;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
            margin: 0;
        }

        .div1 {
            /* 宽和高设置的是内容区域的大小 */
            width: 200px;
            height: 200px;
            background-color: black;
            /* 边框必须同时设置宽度、颜色、类型才能生效，
            三个值可通过border属性同时设置 */
            /* 
            边框常见类型：
                solid   实线
                dotted  点状
                dashed  虚线
                double  双线
             */
            /* border-width: 5px;
            border-color: red;
            border-style: solid; */
            border: 5px red solid;
            /* 圆角，一个值为圆的半径，两个值为椭圆的长短轴 */
            border-radius: 100px;
            /* 
                默认情况下，盒子大小=[width/height]+padding+border+margin
                设置box-sizing可以改变盒子大小的计算方式
                content-box:默认计算方式
                border-box:[width/height]-border-padding=内容区大小

             */
            box-sizing: border-box;
        }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: black;
            /* outline用法与border相同
                作用也是加一个边框，但是不会影响盒子的大小和布局
             */
            outline: 15px red solid;
            /*↓内边距，背景颜色会延伸到内边距*/
            padding: 5px;
            /*↓外边距*/
            /* margin可以设置负值，往反方向移动 */
            /* margin可以设置为auto，一般设置给左右边距
               单独设置左/右边距为auto，则auto为最大边距
               如果同时设置左右为auto，则左右边距相同
               设置上下为auto，边距为0
             */
            margin: 5px;
        }

        .div2-1 {
            width: 180px;
            height: 80px;
            /* 在网页中相邻垂直方向上的外边距会发生外边距重合
                    如果是相邻兄弟元素则外边距会取最大值而不是相加
                    如果是相邻父子元素(父元素无边框、内边距等内容)，则子元素外边距会设置给父元素
             */
            /* 可以给父元素/兄弟元素设置空::before,display:table解决问题 */
            margin: 10px;
            background-color: #FFCCCC;
        }

        .d3 {
            width: 200px;
            height: 200px;
            /* 设置阴影，不影响盒子大小及布局
               前两个值为影子向→↓的偏移量
               第三个值为模糊半径
             */
            box-shadow: 15px 15px 20px rgba(204, 204, 255, 0.9);
        }

        .d3-1 {

            width: 100px;
            height: 100px;
            background-color: #bfc;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="div1">
    </div>
    <br>
    <div class="div2">
        <div class="div2-1"> </div>
        <div class="div2-1"> </div>
    </div>
    outline不影响布局
    <hr>
    <div class="d3">
        <div class="d3-1">
            子元素margin-top传递给父元素
        </div>
    </div>
</body>

</html>